(function() {

this.pasta = this.pasta || {};
this.pasta.webgui = this.pasta.webgui || {};

this.pasta.webgui.Thumbnail = pasta.webgui.Control.extend(
{
	init : function() 
	{
		this._super();
		
		this.imageWidth =  0;
		this.imageHeight =  0;
		
		this.canvas.style.border = "1px solid #666666";
		this.canvas.style.backgroundColor = "#FFFFFF";
		
		this.innerBorderColor = "#888888";
		
		this.canvas.style.webkitBoxShadow = "0px 1px 6px #000000";
		this.canvas.style.mozBoxShadow = "0px 1px 6px #000000";
		this.canvas.style.boxShadow = "0px 1px 6px #000000";
		
		this.padding = 4;
		this.image = "";
		
		this.canvas.innerHTML = "<img id='" + this.cid + "_img' src='img/control/thumbnail/loading.gif' style='position: absolute;left: 25px; top: 24px; width: 24px; height: 24px'>";
	},
	
	//------------------ Setter & Getter -----------------
	
	setImageInternal : function(data, width, height)
	{
		this.imageWidth =  width;
		this.imageHeight =  height;
		
		var ratX = width / this.getWidth();
		var ratY = height / this.getHeight();
		
		var targetWidth = 50;
		var targetHeight = 50;
		var rat = 1;
		
		if (ratX > ratY) // resize to 
		{
			targetWidth = this.getWidth() - (2 * this.padding);
			
			rat = width / targetWidth;
			targetHeight = parseInt(height / rat);
		}
		else
		{
			targetHeight = this.getHeight() - (2 * this.padding);
			
			rat = height / targetHeight;
			targetWidth = parseInt(width / rat);
		}
		
		if (rat < 1)
		{
			targetWidth = width;
			targetHeight = height;
		}
		
		var imgLeft = ((this.getWidth() - targetWidth) / 2) - 1;
		var imgTop = ((this.getHeight() - targetHeight) / 2) - 1;
		
		this.canvas.innerHTML = "<img id='" + this.cid + "_img' src='" + data + "' style='position: absolute; border: 1px solid " + this.innerBorderColor + ";left: " + imgLeft + 
																							"px; top: " + imgTop + 
																							"px; width: " + targetWidth + 
																							"px; height: " + targetHeight + "px'>";
	},
	
	setImage : function(data)
	{
		if (data != null)
		{
			var img = new Image();
			var obj = this;
			var imgFile = data;
			
			img.onload = function() 
			{
				obj.setImageInternal(imgFile, this.width, this.height);
			}
			
			img.src = data;
		}
		else
			this.canvas.innerHTML = "";
		
		this.image = data;
	},
	
	getImage : function()
	{
		return this.image;
	},
	
	getInnerBorderColor : function()
	{
		return this.innerBorderColor;
	},
	
	setInnerBorderColor : function(data)
	{
		this.innerBorderColor = data;
	},
	
	setBgColor : function(data)
	{
		this.bgColor = data;
		this.bgImage = null;
		
		this.canvas.style.background = this.bgColor;
	},
	
	setBorderColor : function(data)
	{
		this.borderColor = data;
		
		if (data != null)
			this.canvas.style.border = "1px solid " + data;
		else
			this.canvas.style.border = "";
	}
});

})();